<%--
  Created by IntelliJ IDEA.
  User: WangWeiwei
  Date: 16-10-15
  Time: 上午10:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="manager/frame/top.jsp"%>
<%@include file="manager/frame/navigator.jsp"%>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="main-grids">
        <div class="top-grids">
            <div class="recommended-info">
                <h3>Recent Videos</h3>
            </div>
            <div class="col-md-4 resent-grid recommended-grid slider-top-grids">
                <div class="resent-grid-img recommended-grid-img">
                    <a href="single.html"><img src="images/t1.jpg" alt="" /></a>
                    <div class="time">
                        <p>3:04</p>
                    </div>
                    <div class="clck">
                        <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
                    </div>
                </div>
                <div class="resent-grid-info recommended-grid-info">
                    <h3><a href="single.html" class="title title-info">Pellentesque vitae pulvinar tortor nullam interdum metus a imperdiet</a></h3>
                    <ul>
                        <li><p class="author author-info"><a href="#" class="author">John Maniya</a></p></li>
                        <li class="right-list"><p class="views views-info">2,114,200 views</p></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-4 resent-grid recommended-grid slider-top-grids">
                <div class="resent-grid-img recommended-grid-img">
                    <a href="single.html"><img src="images/t2.jpg" alt="" /></a>
                    <div class="time">
                        <p>7:23</p>
                    </div>
                    <div class="clck">
                        <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
                    </div>
                </div>
                <div class="resent-grid-info recommended-grid-info">
                    <h3><a href="single.html" class="title title-info">Interdum pellentesque vitae pulvinar tortor nullam metus a imperdiet</a></h3>
                    <ul>
                        <li><p class="author author-info"><a href="#" class="author">John Maniya</a></p></li>
                        <li class="right-list"><p class="views views-info">4,200 views</p></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-4 resent-grid recommended-grid slider-top-grids">
                <div class="resent-grid-img recommended-grid-img">
                    <a href="single.html"><img src="images/t3.jpg" alt="" /></a>
                    <div class="time">
                        <p>4:04</p>
                    </div>
                    <div class="clck">
                        <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
                    </div>
                </div>
                <div class="resent-grid-info recommended-grid-info">
                    <h3><a href="single.html" class="title title-info">Nullam interdum metus a imperdiet pellentesque vitae pulvinar tortor</a></h3>
                    <ul>
                        <li><p class="author author-info"><a href="#" class="author">John Maniya</a></p></li>
                        <li class="right-list"><p class="views views-info">71,174 views</p></li>
                    </ul>
                </div>
            </div>
            <div class="clearfix"> </div>
        </div>
        <div class="recommended">
            <div class="recommended-grids">
                <div class="recommended-info">
                    <h3>Animated Cartoon</h3>
                </div>
                <script src="${basePath}resources/js/responsiveslides.min.js"></script>
                <script>
                    // You can also use "$(window).load(function() {"
                    $(function () {
                        // Slideshow 4
                        $("#slider3").responsiveSlides({
                            auto: true,
                            pager: false,
                            nav: true,
                            speed: 500,
                            namespace: "callbacks",
                            before: function () {
                                $('.events').append("<li>before event fired.</li>");
                            },
                            after: function () {
                                $('.events').append("<li>after event fired.</li>");
                            }
                        });

                    });
                </script>
                <div  id="top" class="callbacks_container">
                    <ul class="rslides" id="slider3">
                        <li>
                            <div class="animated-grids">
                                <div class="col-md-3 resent-grid recommended-grid slider-first">
                                    <div class="resent-grid-img recommended-grid-img">
                                        <a href="single.html"><img src="images/c.jpg" alt="" /></a>
                                        <div class="time small-time slider-time">
                                            <p>7:34</p>
                                        </div>
                                        <div class="clck small-clck">
                                            <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
                                        </div>
                                    </div>
                                    <div class="resent-grid-info recommended-grid-info">
                                        <h5><a href="single.html" class="title">Varius sit sed viverra nullam viverra nullam interdum metus</a></h5>
                                        <div class="slid-bottom-grids">
                                            <div class="slid-bottom-grid">
                                                <p class="author author-info"><a href="#" class="author">John Maniya</a></p>
                                            </div>
                                            <div class="slid-bottom-grid slid-bottom-right">
                                                <p class="views views-info">2,114,200 views</p>
                                            </div>
                                            <div class="clearfix"> </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 resent-grid recommended-grid slider-first">
                                    <div class="resent-grid-img recommended-grid-img">
                                        <a href="single.html"><img src="images/c1.jpg" alt="" /></a>
                                        <div class="time small-time slider-time">
                                            <p>6:23</p>
                                        </div>
                                        <div class="clck small-clck">
                                            <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
                                        </div>
                                    </div>
                                    <div class="resent-grid-info recommended-grid-info">
                                        <h5><a href="single.html" class="title">Nullam interdum metus varius viverra nullam sit amet viverra</a></h5>
                                        <div class="slid-bottom-grids">
                                            <div class="slid-bottom-grid">
                                                <p class="author author-info"><a href="#" class="author">John Maniya</a></p>
                                            </div>
                                            <div class="slid-bottom-grid slid-bottom-right">
                                                <p class="views views-info">14,200 views</p>
                                            </div>
                                            <div class="clearfix"> </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 resent-grid recommended-grid slider-first">
                                    <div class="resent-grid-img recommended-grid-img">
                                        <a href="single.html"><img src="images/c2.jpg" alt="" /></a>
                                        <div class="time small-time slider-time">
                                            <p>2:45</p>
                                        </div>
                                        <div class="clck small-clck">
                                            <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
                                        </div>
                                    </div>
                                    <div class="resent-grid-info recommended-grid-info">
                                        <h5><a href="single.html" class="title">Varius sit sed viverra nullam viverra nullam interdum metus</a></h5>
                                        <div class="slid-bottom-grids">
                                            <div class="slid-bottom-grid">
                                                <p class="author author-info"><a href="#" class="author">John Maniya</a></p>
                                            </div>
                                            <div class="slid-bottom-grid slid-bottom-right">
                                                <p class="views views-info">2,114,200 views</p>
                                            </div>
                                            <div class="clearfix"> </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 resent-grid recommended-grid slider-first">
                                    <div class="resent-grid-img recommended-grid-img">
                                        <a href="single.html"><img src="images/c3.jpg" alt="" /></a>
                                        <div class="time small-time slider-time">
                                            <p>4:34</p>
                                        </div>
                                        <div class="clck small-clck">
                                            <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
                                        </div>
                                    </div>
                                    <div class="resent-grid-info recommended-grid-info">
                                        <h5><a href="single.html" class="title">Nullam interdum metus viverra nullam varius sit sed viverra</a></h5>
                                        <div class="slid-bottom-grids">
                                            <div class="slid-bottom-grid">
                                                <p class="author author-info"><a href="#" class="author">John Maniya</a></p>
                                            </div>
                                            <div class="slid-bottom-grid slid-bottom-right">
                                                <p class="views views-info">2,114,200 views</p>
                                            </div>
                                            <div class="clearfix"> </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="clearfix"> </div>
                            </div>
                        </li>
                        <li>
                            <div class="animated-grids">
                                <div class="col-md-3 resent-grid recommended-grid slider-first">
                                    <div class="resent-grid-img recommended-grid-img">
                                        <a href="single.html"><img src="images/c1.jpg" alt="" /></a>
                                        <div class="time small-time slider-time">
                                            <p>4:42</p>
                                        </div>
                                        <div class="clck small-clck">
                                            <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
                                        </div>
                                    </div>
                                    <div class="resent-grid-info recommended-grid-info">
                                        <h5><a href="single.html" class="title">Varius sit sed viverra viverra nullam nullam interdum metus</a></h5>
                                        <div class="slid-bottom-grids">
                                            <div class="slid-bottom-grid">
                                                <p class="author author-info"><a href="#" class="author">John Maniya</a></p>
                                            </div>
                                            <div class="slid-bottom-grid slid-bottom-right">
                                                <p class="views views-info">2,114,200 views</p>
                                            </div>
                                            <div class="clearfix"> </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 resent-grid recommended-grid slider-first">
                                    <div class="resent-grid-img recommended-grid-img">
                                        <a href="single.html"><img src="images/c2.jpg" alt="" /></a>
                                        <div class="time small-time slider-time">
                                            <p>6:14</p>
                                        </div>
                                        <div class="clck small-clck">
                                            <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
                                        </div>
                                    </div>
                                    <div class="resent-grid-info recommended-grid-info">
                                        <h5><a href="single.html" class="title">Nullam interdum metus viverra nullam varius sit sed viverra</a></h5>
                                        <div class="slid-bottom-grids">
                                            <div class="slid-bottom-grid">
                                                <p class="author author-info"><a href="#" class="author">John Maniya</a></p>
                                            </div>
                                            <div class="slid-bottom-grid slid-bottom-right">
                                                <p class="views views-info">2,114,200 views</p>
                                            </div>
                                            <div class="clearfix"> </div>
                                        </div>
                                    </div>
                                </div>


                                <div class="clearfix"> </div>
                            </div>
                        </li>
                        <li>
                            <div class="animated-grids">
                                <div class="clearfix"> </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
        <div class="recommended"></div>
    </div>
<%@include file="manager/frame/footer.jsp"%>